<template>
  <div>
    <h2>内容渲染指令</h2>
    <p>{{uname}}</p>
    <p>{{age}}</p>
    <!-- 小写转大写 -->
    <p>{{uname.toUpperCase()}}</p>
    <p>{{flag?'1':'2'}}</p>
    <p>{{cc()}}</p>
    <p v-html="info">相当于innerHTML</p>

    <h2>属性绑定指令</h2>
    <img :src="url" alt="">
    <img v-bind:src="url" alt="">
    <input type="text" :value="uname" placeholder="">
    <input type="text" :value="uname+' mm'" placeholder="">

    <h2>事件绑定指令</h2>
    <button v-on:click="age++">按钮1</button>
    <button @click="age--">按钮2</button>
    <button @click="aa">点击调用方法</button>
    <button @click="bb(1,2,$event)">给方法传参</button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      uname: 'zhangzhang',
      age:20,
      flag:true,
      info:'这是一个<strong>机智</strong>的boy',
      url:'http://www.itcbc.com:3006/formdata/123.jpg'
    }
  },
  methods: {
      aa(e){
        console.log(e.target)
      },
      bb(x,y,e){
        console.log(x+y)
        console.log(e.target)
      },
      cc(){
        return 121212
      }
    }
}
</script>
